var YanInputSelect = {
	options:{
		target:"",
		id:"yan-input-select-popup",
		delay:500
	},
	searchTimer:null,
	selector:'',
	selectorValue:'',
	cacheData:{},
	is_first:true,
	template:'<div id="$id" class="input-select-popup position-absolute toast show" role="alert" aria-live="assertive" aria-atomic="true" style="z-index:9999"><div class="toast-body">$content</div></div>',
	render:function(options){
		this.options = $.extend(this.options, options);
		this.addEvent();
	},
	addEvent:function(){
		var that = this;
		$(document).on("click", this.options.target, function(e){
			e.stopPropagation();
			var template = that.template.replaceAll('$id', that.options.id);
			template = template.replaceAll('$content', '<ul class="list-group"></ul>');
			$(this).parent().append(template);
        	that.selector = $(this);
        	that.selectorValue = $(this).val();
        	that.pullData($(this));
		});
		$(document).on("blur", this.options.target, function(e){
			e.stopPropagation();
			if(that.selectorValue!=$(this).val()){
				var targetValue = $(this).data("target");
				if(targetValue){
					$("[name='"+targetValue+"']").val("");
					$(this).trigger("after-change");
				}
			}
		});
		$(document).on("keyup", this.options.target, function(){
			var selector = $(this);
			if(that.searchTimer != null){
                clearTimeout(that.searchTimer);
            }
            that.searchTimer = setTimeout(function() {
                that.pullData(selector);
                that.searchTimer = null;
            }, that.options.delay);
		});
		$(document).on("click", function(){
			if($("#"+that.options.id).length){
				that.close();
			}
		});
		$(document).on("click", "#"+that.options.id+" [data-filter='option']", function(){
			if($(this).data("value")){
				var targetValue = $(that.options.target).data("target");
				if(targetValue){
					$("[name='"+targetValue+"']").val($(this).data("value"));
				}
				if(that.selector && that.selector != null){
					that.selector.val($(this).html());					
					that.selector.trigger("after-change");
				}
			}
			that.close();
		});
	},
	pullData: function(selector){
        var that = this;
        if(that.options['url']){
            var q = selector.val();
            $.ajax({
                url: that.options['url'],
                data:{q:typeof(q)!="undefined" ? q : ''},
                success:function(data){
                    that.renderData(data.results);
                    if(that.is_first){
                        that.cacheData = data.results;
                    }
                    that.is_first = false;
                },
                error:function(err){
                    console.log(err);
                }
            })
        }else{
            that.renderData();
        }
    },
    renderData : function(data){
        var that = this;
        var str = '';
        if(data){
            for(var x of data){
                str += '<li class="list-group-item" data-filter="option" data-value="'+x.id+'">'+x.text+'</li>';
            }
        }
        $("#"+that.options.id+" ").find("ul").html(str);
    },
    close:function(){
    	var that = this;
    	$("#"+that.options.id).remove();
		that.selector = null;
    }
}